<template>
  <el-drawer
    v-model="visible"
    :title="$t('theme')"
    direction="rtl"
    size="400px"
    :with-header="true"
  >
    <div class="theme-settings">
      <!-- 暗夜模式切换 -->
      <div class="setting-section">
        <h3>{{ $t('darkMode') }}</h3>
        <div class="setting-content">
          <el-switch
            v-model="isDark"
            :active-text="$t('darkMode')"
            :inactive-text="$t('lightMode')"
            @change="handleDarkModeChange"
          />
        </div>
      </div>

      <!-- 主题色选择 -->
      <div class="setting-section">
        <h3>{{ $t('primaryColor') }}</h3>
        <div class="setting-content">
          <div class="color-palette">
            <div
              v-for="color in presetColors"
              :key="color"
              class="color-item"
              :class="{ active: currentColor === color }"
              :style="{ backgroundColor: color }"
              @click="handleColorChange(color)"
            >
              <el-icon v-if="currentColor === color"><Check /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- 语言切换 -->
      <div class="setting-section">
        <h3>{{ $t('language') }}</h3>
        <div class="setting-content">
          <el-select
            v-model="currentLanguage"
            @change="handleLanguageChange"
            style="width: 100%"
          >
            <el-option
              v-for="lang in languages"
              :key="lang.value"
              :label="lang.label"
              :value="lang.value"
            />
          </el-select>
        </div>
      </div>

      <!-- 重置按钮 -->
      <div class="setting-section">
        <el-button type="primary" @click="resetTheme" style="width: 100%">
          重置为默认主题
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'
import { 
  themeConfig, 
  presetColors, 
  toggleDarkMode, 
  setPrimaryColor 
} from '@/utils/theme'
import { changeLanguage, getCurrentLanguage } from '@/utils/i18n'

const { t, locale } = useI18n()

const visible = ref(false)

// 使用响应式引用来避免计算属性只读错误
const isDark = ref(themeConfig.value.isDark)
const currentColor = ref(themeConfig.value.primaryColor)
const currentLanguage = ref(getCurrentLanguage())

// 监听主题配置变化
watch(() => themeConfig.value.isDark, (newValue) => {
  isDark.value = newValue
})

watch(() => themeConfig.value.primaryColor, (newValue) => {
  currentColor.value = newValue
})

// 语言选项
const languages = [
  { label: '中文', value: 'zh' },
  { label: 'English', value: 'en' },
  { label: '日本語', value: 'ja' }
]

// 监听语言变化
watch(currentLanguage, (newLang) => {
  locale.value = newLang
})

// 处理暗夜模式切换
const handleDarkModeChange = () => {
  toggleDarkMode()
  ElMessage.success(isDark.value ? '已切换到暗夜模式' : '已切换到浅色模式')
}

// 处理主题色变化
const handleColorChange = (color) => {
  setPrimaryColor(color)
  ElMessage.success('主题色已更新')
}

// 处理语言变化
const handleLanguageChange = (lang) => {
  changeLanguage(lang)
  ElMessage.success('语言已切换')
}

// 重置主题
const resetTheme = () => {
  setPrimaryColor('#409eff')
  if (isDark.value) {
    toggleDarkMode()
  }
  changeLanguage('zh')
  ElMessage.success('主题已重置为默认')
}

// 打开设置面板
const open = () => {
  visible.value = true
}

// 暴露方法给父组件
defineExpose({
  open
})
</script>

<style scoped>
.theme-settings {
  padding: 20px;
}

.setting-section {
  margin-bottom: 30px;
}

.setting-section h3 {
  margin-bottom: 15px;
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: 600;
}

.setting-content {
  margin-bottom: 10px;
}

.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-item {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.color-item:hover {
  transform: scale(1.1);
  border-color: var(--el-border-color);
}

.color-item.active {
  border-color: var(--el-color-primary);
  transform: scale(1.1);
}

.color-item .el-icon {
  color: white;
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* 响应式设计 */
@media (max-width: 480px) {
  .color-palette {
    justify-content: center;
  }
}
</style> 